<template>
    <view v-if="show">

        <u-popup :show="show" mode="center" :round="20" :safeAreaInsetBottom="true">
            <view class="version-wrap">
                <view class="header-img">
                    <image :src="IMAGE_URL + '/static/index/icon8.png'" style="width: 180rpx; height: 190rpx;" mode="aspectFit"></image>
                </view>
                <view class="title">发现新版本</view>
                <view class="ver">{{ displayVersion }}</view>
                <view class="content">
                    <view class="line" v-for="(item, idx) in changelog" :key="idx">
                        {{ idx + 1 }}、{{ item }}
                    </view>
                </view>
                <view class="btn" @click="updateEvent()">立即升级</view>
            </view>
        </u-popup>
    </view>

</template>

<script>
import appConfig from '@/config/app.js'
export default {
    name: 'VersionPopup',
    data(){
        return {
            IMAGE_URL: appConfig.IMAGE_URL,
            show: false,
            changelog: [
                '优化已知问题，使用户体验更流畅',
                '优化发布功能，希望你每次都有好的体验'
            ],
            version:'1.0.0',
            download_url:''
        }
    },
    computed: {
        displayVersion() {
            return 'V' + this.version
        }
    },
    created() {
        // #ifdef APP-PLUS
        this.versionEvent()
        if( plus.os.name=="Android" ){
            this.checkAppVersion()
        }
         // #endif
    },
    methods: {
        updateEvent(){
            // #ifdef APP-PLUS
            plus.runtime.openURL(download_url)
            plus.runtime.quit()
            // #endif
        },
        versionEvent() {
           // 获取应用版本号
            let version = plus.runtime.version
            //检测当前平台，如果是安卓则启动安卓更新  
            uni.getSystemInfo({
                success:(res) => {
                    this.updateHandler(res.platform, version)
                }
            })
        },

        updateHandler (platform, version) {
            let data = {
                platform: platform,
                version: version
            }
            //获取更新地址
            // this.$api.appUpdate(data, res => {
            //     if (res.status) {
            //         const info = res.data[0]
            //         if (info.version !== '' && info.version > version) {
            //             uni.showModal({ //提醒用户更新
            //                 title: '更新提示',
            //                 content: info.note,
            //                 success: (res) => {
            //                     if (res.confirm) {
            //                         plus.runtime.openURL(info.download_url);
            //                     }
            //                 }
            //             })
            //         }
            //     }
            // })
        },
        // 检测app版本
        checkAppVersion(){
            let currVersion = plus.runtime.versionCode;
            console.log(currVersion)
            // this.$api.getAppVersion({},res=>{console.log(res)
            //     let update_version = parseInt(res.data[0].update_version);
            //     let latest_version = parseInt(res.data[0].latest_version);
            //     this.download_url = download_url
            //     if(update_version>currVersion){
            //         //您的App版本过低，请先前往下载更新
            //        this.show = true
            //     }else if(currVersion>=update_version && currVersion < latest_version){
            //         //您的App版本过低，请先前往下载更新
            //         this.show = true
            //     }
            // })
        }
    }
}
</script>

<style lang="scss" scoped>
.version-wrap {
    width: 580rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.12);
    padding: 40rpx 40rpx 32rpx;
    box-sizing: border-box;
    text-align: center;
}

.header-img {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 12rpx;
}

.title {
    font-size: 32rpx;
    color: #222;
    font-weight: 700;
    margin-top: 8rpx;
}

.ver {
    font-size: 24rpx;
    color: #999;
    margin: 8rpx 0 40rpx;
}

.content {
    text-align: left;
    color: #333;
    font-size: 28rpx;
    line-height: 1.8;
    margin: 0 8rpx 24rpx;
}

.btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    font-weight: 600;
}
</style>